<template>
  <div class="inventory-record-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2>盘点记录</h2>
      <el-button type="text" @click="handleBack">返回</el-button>
    </div>

    <!-- 查询表单区域 -->
    <el-form 
      :model="searchForm" 
      ref="searchFormRef" 
      label-width="80px"
      class="search-form"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="开始时间">
            <el-date-picker 
              v-model="searchForm.startTime" 
              type="date" 
              placeholder="选择开始时间" 
              style="width: 100%;"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="结束时间">
            <el-date-picker 
              v-model="searchForm.endTime" 
              type="date" 
              placeholder="选择结束时间" 
              style="width: 100%;"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="盘点仓库">
            <el-select v-model="searchForm.warehouse" placeholder="选择盘点仓库" clearable>
              <el-option 
                v-for="item in warehouseOptions" 
                :key="item.value" 
                :label="item.label" 
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="盘点人">
            <el-input v-model="searchForm.inventoryPerson" placeholder="输入盘点人" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="摘要">
            <el-input v-model="searchForm.summary" placeholder="输入摘要" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 盘点记录表格 -->
    <el-table 
      :data="inventoryList" 
      border 
      stripe 
      class="record-table"
      v-loading="loading"
    >
      <el-table-column prop="warehouseNo" label="仓库编号" />
      <el-table-column prop="warehouseName" label="仓库名称" />
      <el-table-column prop="inventoryNo" label="盘点编号" />
      <el-table-column prop="inventoryTime" label="盘点时间" />
      <el-table-column prop="inventoryPerson" label="盘点人" />
      <el-table-column prop="status" label="完成状态">
        <template #default="scope">
          <el-tag 
            :type="scope.row.status === '已完成' ? 'success' : 'info'"
          >
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="description" label="说明" />
      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <el-button 
            type="danger" 
            size="small" 
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
          <el-button 
            type="primary" 
            size="small" 
            @click="handleViewRecord(scope.row.id)"
          >
            查看记录
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <div class="pagination">
      <span class="total-info">共 {{ totalRecords }} 条 共 {{ totalPages }} 页</span>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50]"
        :total="totalRecords"
        layout="prev, pager, next, jumper, sizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 删除确认弹窗 -->
    <el-dialog 
      v-model="deleteConfirmVisible" 
      title="确认删除" 
      width="300px"
    >
      <p>确定要删除此盘点记录吗？此操作不可撤销。</p>
      <template #footer>
        <el-button @click="deleteConfirmVisible = false">取消</el-button>
        <el-button 
          type="danger" 
          @click="confirmDelete"
        >
          确认删除
        </el-button>
      </template>
    </el-dialog>

    <!-- 查看记录弹窗 -->
    <el-dialog 
      v-model="viewRecordVisible" 
      title="盘点记录详情" 
      width="800px"
    >
      <el-descriptions column="2" border>
        <el-descriptions-item label="仓库编号">{{ currentRecord.warehouseNo }}</el-descriptions-item>
        <el-descriptions-item label="仓库名称">{{ currentRecord.warehouseName }}</el-descriptions-item>
        <el-descriptions-item label="盘点编号">{{ currentRecord.inventoryNo }}</el-descriptions-item>
        <el-descriptions-item label="盘点时间">{{ currentRecord.inventoryTime }}</el-descriptions-item>
        <el-descriptions-item label="盘点人">{{ currentRecord.inventoryPerson }}</el-descriptions-item>
        <el-descriptions-item label="完成状态">
          <el-tag 
            :type="currentRecord.status === '已完成' ? 'success' : 'info'"
          >
            {{ currentRecord.status }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{ currentRecord.remark || '无' }}</el-descriptions-item>
        <el-descriptions-item label="说明">{{ currentRecord.description || '无' }}</el-descriptions-item>
      </el-descriptions>
      
      <div class="detail-table-container">
        <h3 class="detail-table-title">盘点产品明细</h3>
        <el-table 
          :data="currentRecord.productDetails" 
          border 
          stripe 
          class="detail-table"
        >
          <el-table-column prop="productNo" label="产品编号" />
          <el-table-column prop="productName" label="产品名称" />
          <el-table-column prop="brand" label="归属品牌" />
          <el-table-column prop="spec" label="规格" />
          <el-table-column prop="inventoryQuantity" label="盘点数量" />
          <el-table-column prop="stock" label="库存数量" />
          <el-table-column prop="difference" label="差异" />
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 路由实例
const router = useRouter()

// 状态管理
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const totalRecords = ref(0)
const totalPages = ref(0)

// 弹窗控制
const deleteConfirmVisible = ref(false)
const viewRecordVisible = ref(false)
const deleteRecordId = ref(null)
const currentRecord = ref({})

// 查询表单数据
const searchForm = reactive({
  startTime: '',
  endTime: '',
  warehouse: '',
  inventoryPerson: '',
  summary: ''
})

// 仓库下拉选项
const warehouseOptions = [
  { label: '1号仓库', value: '1号' },
  { label: '2号仓库', value: '2号' },
  { label: '3号仓库', value: '3号' },
  { label: '4号仓库', value: '4号' }
]

// 盘点记录数据
const inventoryList = reactive([
  {
    id: 1,
    warehouseNo: '001',
    warehouseName: '1号',
    inventoryNo: 'PD-20220517-00001',
    inventoryTime: '2022.05.22',
    inventoryPerson: '陈晨',
    status: '已完成',
    remark: '-',
    description: '-'
  },
  {
    id: 2,
    warehouseNo: '002',
    warehouseName: '2号',
    inventoryNo: 'PD-20220517-00001',
    inventoryTime: '2022.05.22',
    inventoryPerson: '陈光',
    status: '已完成',
    remark: '-',
    description: '-'
  },
  {
    id: 3,
    warehouseNo: '003',
    warehouseName: '3号',
    inventoryNo: 'PD-20220517-00001',
    inventoryTime: '2022.05.22',
    inventoryPerson: '陈鹿',
    status: '已完成',
    remark: '-',
    description: '-'
  },
  {
    id: 4,
    warehouseNo: '004',
    warehouseName: '4号',
    inventoryNo: 'PD-20220517-00001',
    inventoryTime: '2022.05.22',
    inventoryPerson: '陈晨',
    status: '已完成',
    remark: '-',
    description: '-'
  }
])

// 过滤后的盘点记录（分页）
const filteredInventory = computed(() => {
  // 这里可以添加搜索过滤逻辑，当前示例仅做分页
  totalRecords.value = inventoryList.length
  totalPages.value = Math.ceil(totalRecords.value / pageSize.value)
  const startIndex = (currentPage.value - 1) * pageSize.value
  return inventoryList.slice(startIndex, startIndex + pageSize.value)
})

// 生命周期：初始化
onMounted(() => {
  // 模拟加载数据
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
})

// 分页事件
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1 // 重置到第一页
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

// 查询事件
const handleSearch = () => {
  // 这里可以添加实际的搜索逻辑，如接口请求
  ElMessage.info('查询功能已触发，可根据条件筛选盘点记录')
  currentPage.value = 1 // 搜索后重置到第一页
}

// 返回事件
const handleBack = () => {
  router.back()
}

// 删除记录（显示确认）
const handleDelete = (id) => {
  deleteRecordId.value = id
  deleteConfirmVisible.value = true
}

// 确认删除
const confirmDelete = () => {
  loading.value = true
  setTimeout(() => {
    // 模拟删除逻辑
    const index = inventoryList.findIndex(item => item.id === deleteRecordId.value)
    if (index !== -1) {
      inventoryList.splice(index, 1)
    }
    deleteConfirmVisible.value = false
    loading.value = false
    ElMessage.success('盘点记录已删除')
  }, 500)
}

// 查看记录详情
const handleViewRecord = (id) => {
  // 模拟获取详情数据
  const record = inventoryList.find(item => item.id === id)
  if (record) {
    currentRecord.value = {
      ...record,
      productDetails: [
        {
          productNo: '01',
          productName: '丝芙兰',
          brand: '丝芙兰精华',
          spec: '50g',
          inventoryQuantity: 100,
          stock: 98,
          difference: 2
        },
        {
          productNo: '02',
          productName: '雅诗兰黛',
          brand: '小棕瓶',
          spec: '30ml',
          inventoryQuantity: 50,
          stock: 50,
          difference: 0
        }
      ]
    }
    viewRecordVisible.value = true
  }
}
</script>

<style scoped>
.inventory-record-page {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f5f5f5;
}

.page-header h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.search-form {
  margin-bottom: 20px;
}

.record-table {
  width: 100%;
  margin-bottom: 20px;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.total-info {
  color: #606266;
  font-size: 14px;
}

.detail-table-container {
  margin-top: 20px;
}

.detail-table-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.detail-table {
  width: 100%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .search-form .el-row {
    flex-wrap: wrap;
  }
}
</style>